<template>
  <div class="top-category">
    <div class="container m-top-20">
      <!-- banner -->
      <div class="home-banner">
        <XtxSlider :sliders="bannerList" />
      </div>
      <!-- 所有二级分类 -->
      <div class="sub-list">
        <h3>全部分类</h3>
        <ul>
          <li v-for="i in categoryData.children" :key="i.id">
            <a href="javascript:;">
              <img :src="i.picture" />
              <p>{{ i.name }}</p>
            </a>
          </li>
        </ul>
      </div>
      <!-- 分类关联商品 -->
      <div
        class="ref-goods"
        v-for="item in categoryData.children"
        :key="item.id"
      >
        <div class="head">
          <h3>- {{ item.name }} -</h3>
          <XtxMore to="/" />
        </div>
        <div class="body">
          <RouterLink
            to="/"
            class="goods-item"
            v-for="good in item.goods"
            :key="good.id"
          >
            <img :src="good.picture" alt="" />
            <p class="name ellipsis">{{ good.name }}</p>
            <p class="desc ellipsis">{{ good.desc }}}</p>
            <p class="price">&yen;{{ good.price }}</p>
          </RouterLink>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { useBanner } from './service/useBanner'
import { useCategory } from './service/useCategory'
export default {
  name: 'TopCategory',
  setup () {
    // 俩个业务  1.banner  2.分类
    // 之前 基于组件拆分(html + css + js)  现在 基于业务逻辑来分(js)
    // 拆分思路：按照业务逻辑拆分出俩个独立的js文件 每个js文件中实现一个独立的逻辑
    // 然后在setup函数把拆分出去逻辑再组合起来

    // 总结：
    /*
      1. 基于业务逻辑的拆分拆分的是什么？
         拆分的是独立的业务逻辑 (js代码)

      2. 基于组件的拆分逻辑拆分的是什么？
         拆分的是一个vue实例对象 (html + js + css)

      3. 业务逻辑拆分 vs 组件拆分
         组件拆分：1. 复用  2. 减少维护成本(很有可能出现因为组件拆分必定会形成组件嵌套 组件通信 通信成本)
         逻辑拆分：1. 复用 只有js 没有组件通信的问题 (既可以进行复用 又不会造成组件通信成本的增加)

      4. 逻辑拆分怎么做呢？
          1. 单独定义一个js文件 useXXX.js
             function useXXX(){
               // 业务逻辑代码
               return {
                 响应式数据
                 事件回调函数
               }
             }
          2. 来到.vue文件中 setup函数执行useXXX函数
             const { 响应式数据,事件回调函数 } = useXXX()
             return {
               响应式数据,
               事件回调函数
             }

      5. vue3 setup函数到底是干嘛的？
         setup函数中尽量不要编写太多的业务代码 它只是一个组合函数
         用来把拆分出去的业务逻辑在这里组合起来 供模板使用
    */
    // banner
    const { bannerList } = useBanner()
    // 分类区域
    const { categoryData } = useCategory()
    return {
      bannerList,
      categoryData
    }
  }
}
</script>

<style scoped lang="less">
.top-category {
  h3 {
    font-size: 28px;
    color: #666;
    font-weight: normal;
    text-align: center;
    line-height: 100px;
  }
  .sub-list {
    margin-top: 20px;
    background-color: #fff;
    ul {
      display: flex;
      padding: 0 32px;
      flex-wrap: wrap;
      li {
        width: 168px;
        height: 160px;
        a {
          text-align: center;
          display: block;
          font-size: 16px;
          img {
            width: 100px;
            height: 100px;
          }
          p {
            line-height: 40px;
          }
          &:hover {
            color: @xtxColor;
          }
        }
      }
    }
  }
  .ref-goods {
    background-color: #fff;
    margin-top: 20px;
    position: relative;
    .head {
      .xtx-more {
        position: absolute;
        top: 20px;
        right: 20px;
      }
      .tag {
        text-align: center;
        color: #999;
        font-size: 20px;
        position: relative;
        top: -20px;
      }
    }
    .body {
      display: flex;
      justify-content: space-around;
      padding: 0 40px 30px;
    }
  }
}
.goods-item {
  display: block;
  width: 220px;
  padding: 20px 30px;
  text-align: center;
  img {
    width: 160px;
    height: 160px;
  }
  p {
    padding-top: 10px;
  }
  .name {
    font-size: 16px;
  }
  .desc {
    color: #999;
    height: 29px;
  }
  .price {
    color: @priceColor;
    font-size: 20px;
  }
}
</style>
